<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="addHandle" :icon="Plus">
          新增
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:switch="scope">
        <el-switch
          :model-value="scope.row.status == 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeStatus(scope.row)"
        />
      </template>
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="edit(scope.row)">
          编辑
        </el-button>
        <el-button plain type="primary" @click="del(scope.row.id)">
          删除
        </el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <pub-dialog
      v-if="editDialogVisible"
      title="编辑"
      v-model:visible="editDialogVisible"
      width="1000px"
      :hasExtraBtn="true"
    >
      <editDialog @cancel="cancelEditHandle" :currentId="currentId" />
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTable } from '@/hooks/UseTable'
import {
  getFileTypeListPage,
  getFileTypeDetailOrDelete,
  changeFileTypeStatus
} from '@/api/material.js'
import editDialog from './components/edit.vue'
const searchColumns = ref([
  {
    label: '使用场景',
    el: 'DictSelect',
    bind: 'sceneType',
    defaultValue: '',
    code: 'CLSYCJLX',
    labelWidth: 80
  },
  {
    label: '材料类型标识',
    el: 'Input',
    bind: 'bizType',
    defaultValue: '',
    labelWidth: 110
  },
  {
    label: '材料类型标识名称',
    el: 'Input',
    bind: 'bizTypeName',
    defaultValue: '',
    labelWidth: 130
  },
  {
    label: '状态',
    el: 'DictSelect',
    bind: 'status',
    defaultValue: '',
    code: 'ZDZT',
    labelWidth: 110
  }
])
const columns = ref([
  {
    label: '使用场景',
    prop: 'sceneType',
    type: 'formatDict',
    formatCode: 'CLSYCJLX'
  },
  { label: '材料类型标识', prop: 'bizType' },
  { label: '材料类型标识名称', prop: 'bizTypeName' },
  { label: '状态', prop: 'status', type: 'switch' },
  { label: '操作', type: 'option' }
])

const editDialogVisible = ref(false)

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(getFileTypeListPage)
const currentId = ref('')
const edit = row => {
  currentId.value = row.id
  editDialogVisible.value = true
}

const changeStatus = row => {
  let newStatus
  if (row.status == 1) {
    newStatus = 0
    row.status = 0
  } else if (row.status == 0) {
    newStatus = 1
    row.status = 1
  }
  const params = {
    id: row.id,
    status: newStatus
  }
  changeFileTypeStatus(params).then(result => {
    if (result.succeed) {
      ElMessage({
        type: 'success',
        message: result.msg
      })
    }
    getList()
  })
}

// 删除
const del = id => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await getFileTypeDetailOrDelete(id, 'delete')
      if (res.succeed) {
        getList()
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    })
    .catch(() => {})
}

const addHandle = () => {
  currentId.value = ''
  editDialogVisible.value = true
}

const cancelEditHandle = () => {
  editDialogVisible.value = false
  getList()
}
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
